<template>
	<view>
		<!-- 头部空出的距离 -->
		<!-- 注： 这里判断  非小程序的  class 高度 不然  高度样式会 偏高 -->
		<!-- #ifndef MP -->
			<view class="status_bar"></view>
		<!-- #endif -->
		<!-- 头部用户信息 -->
		<view class="my-header">
			<view 
				@click=" hasLogin?  navTo('/pages/my/user') :  navTo('/pages/auth/login')"
			 class="header-content space-between center">
				<view class="left  center">
					<image class="header-image" :src="userInfo.imageUrl || '/static/images/banner1.jpg'" mode=""></image>
					
					<view v-if="hasLogin" class="header-info column">
						<text class="nickname">{{userInfo.nickName}}</text>
						<text class="username">用户名:{{userInfo.username}}</text>
					</view>
					
					<view v-else  class="header-info ">
						<text class="nickname">请登录</text>
					</view>
					
				</view>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<!-- 功能列表 -->
		<mxg-list :list="list"></mxg-list>
	</view>
</template>

<script>
	import list  from '@/config/my-list-bar.js'
	import {mapState , mapGetters} from 'vuex'
	export default {
		data() {
			return {
				list:list(), //调用方法 不要少了括号
				
			}
		},
		computed:{
			//解析状态作为计算属性
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
			// import {mapState , mapGetters} from 'vuex' 从vuex 解析出  
			// mapState ，mapGetters 两个实例 然后放计算属性中
			/*userInfo(){
				retrun this.$store.state.userInfo
			}*/
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.status_bar{
		height:calc(var(--status-bar-height) + 48px);
		width: 100%;
		background-color: $xg-color-primary;
	}
		
	.my-header{
		background-color:  $xg-color-primary;
		.header-content{
			padding: 50rpx  39rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx  30rpx  0 0 ;
		}
		.left{
			.header-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 80rpx;
			}
			.header-info{
				margin-left: 30rpx;
				.nickname{
					font-size: 39rpx;
					font-weight: bold;
				}
				.username{
					font-size:33rpx;
					color: $xg-text-color-grey;
					
				}
			}
		}
		
		.icon-right  {
			font-size: 35rpx;
			color: $xg-text-color-grey;
		}
		
	}
	
	
	image {
		width: 80rpx;
		height: 80rpx;
	}
</style>
